/*
 * @Author: 周海 zhouhaib@yonyou.com
 * @Date: 2022-11-30 19:53:31
 * @LastEditors: Zhouhai 497675647@qq.com
 * @LastEditTime: 2022-12-01 16:40:57
 */
/* eslint-disable @typescript-eslint/no-unused-vars */
import PageDiv from '@/components/PageDiv';
import { Avatar, Card, Col, Divider, Form, List, Row, Space, Tabs, Typography } from 'antd';
import { PhoneOutlined, MailOutlined, ScheduleOutlined, UserOutlined } from '@ant-design/icons';
import React, { useEffect } from 'react'
import './index.less';
import { useStore } from '@/store';
import UserAvatar from './components/userAvatar';
import { useState } from 'react';
import ResetPwd from './components/resetPwd';
import UserInfo from './components/userInfo';
const Profile: React.FC = () => {
    const [open, setOpen] = useState<boolean>(false)

    const { userStore } = useStore()
    console.log('userStore', userStore);


    return (
        <PageDiv>
            <Row gutter={24}>
                <Col span={6}>
                    <Card
                        bordered
                        title={'个人信息'}>
                        <ul style={{ padding: '0px' }}>
                            <li className='avatar'>
                                <Avatar
                                    size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
                                    src={userStore.avatar}
                                    onClick={() => setOpen(true)}
                                />
                            </li>
                            <Divider plain style={{ margin: '0px 0px' }} />
                            <li className='row'>
                                <Space>
                                    <UserOutlined />
                                    <span>用户名称</span>
                                </Space>
                                <span>{userStore.user.nickName}</span>
                            </li>
                            <Divider plain style={{ margin: '0px 0px' }} />
                            <li className='row'>
                                <Space>
                                    <PhoneOutlined />
                                    <span>手机号码</span>
                                </Space>
                                <span>{userStore.user.phonenumber}</span>
                            </li>
                            <Divider plain style={{ margin: '0px 0px' }} />
                            <li className='row'>
                                <Space>
                                    <MailOutlined />
                                    <span>用户邮箱</span>
                                </Space>
                                <span>{userStore.user.email}</span>
                            </li>
                            <Divider plain style={{ margin: '0px 0px' }} />
                            <li className='row'>
                                <Space>
                                    <ScheduleOutlined />
                                    <span>创建日期</span>
                                </Space>
                                <span>{userStore.user.createTime?.toString()}</span>
                            </li>
                            <Divider plain style={{ margin: '0px 0px' }} />
                        </ul>
                    </Card>
                </Col>
                <Col span={18}>
                    <Card
                        bordered
                        title={'基本资料'}>
                        <Tabs
                            defaultActiveKey="1"
                            items={[
                                {
                                    label: `基本信息`,
                                    key: '1',
                                    children: <UserInfo />
                                },
                                {
                                    label: `修改密码`,
                                    key: '2',
                                    children: <ResetPwd />
                                }
                            ]} />

                    </Card>
                </Col>
            </Row>
            <UserAvatar uploadedImageFile={userStore.avatar} onClose={() => setOpen(false)} open={open} />
        </PageDiv>
    )
}
export default Profile;